<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="./jquery-ui.css">
  <script src="./jquery-1.10.2.js"></script>
  <script src="./jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .drag { width: 150px; height: 150px; padding: 0.5em; }
  #ctn > div {  border:1px solid red;}
  .border { border:1px solid green;}
  </style>
  <script>
  $(function() {
    $( '.drag' , "#ctn" ).click(function(){
		console.log('click')	
	}).draggable({
		appendTo : document.body,
		revert : function(){
			console.log(arguments);	
			//return true;
		},
		//handle : 'p',
		zIndex : 20,
		opacity : .5,
		cursorAt  : { left : 20 },
		//grid: [ 50, 20 ],
		//containment : [200,200,500,500],
		helper1 : function(){
			console.log(arguments);	
			return $('<div class="border">NOBOOBBOOBO</div>')
		}//'clone'	
	});
  });
  </script>
</head>
<body>
<div id="ctn">
    <div  class="drag ui-widget-content">
      <p>Drag me around</p>
    </div>
    
    <div  class="drag ui-widget-content">
      <p>Drag me around</p>
    </div>
    
    <div  class="drag ui-widget-content">
      <p>Drag me around</p>
    </div>
    
    <div  class="drag ui-widget-content">
      <p>Drag me around</p>
    </div>
</div> 
 
</body>
</html>